<!-- components/SidebarMenu.vue -->
<template>
  <div
    :class="[
      'bg-[#F9F9FA] h-full flex flex-col px-2 transition-all duration-300 border-r border-[#5E5E5E]/20',
      collapsed ? 'w-[64px]' : 'w-[280px]',
    ]"
  >
    <!-- LOGO 和收起展开按钮 -->
    <div class="flex items-center py-6 pr-0 relative">
      <div v-if="!collapsed" class="flex-1">
        <span class="icon-[mage--robot-appreciate-fill] w-6 h-6 text-[#4f46e5] ml-4"></span>
      </div>
      <Tooltip :arrow="false" placement="right">
        <template #title>
          {{ collapsed ? '展开侧栏' : '关闭侧栏' }}
        </template>
        <div
          class="flex cflex w-[40px] h-[40px] hover:bg-zinc-200 cursor-ew-resize rounded-md group"
          @click="$emit('update:collapsed', !collapsed)"
        >
          <img
            :src="collapsed ? logoIcon : fold"
            :class="[
              collapsed ? 'w-[24px] h-[24px]' : 'w-[20px] h-[16px]',
              collapsed ? 'group-hover:hidden' : '',
            ]"
          />
          <img
            v-if="collapsed"
            src="@/assets/imgs/fold.png"
            class="w-[20px] h-[16px] hidden group-hover:block"
          />
        </div>
      </Tooltip>
    </div>

    <!-- 新建聊天按钮 -->
    <Tooltip v-if="collapsed" :arrow="false" placement="right">
      <template #title>
        <div class="flex items-center justify-between gap-2">
          <span>新聊天</span>
          <span class="text-xs text-gray-400">{{ shortcut_new }}</span>
        </div>
      </template>
      <button
        @click="addNewChat"
        class="flex items-center h-10 gap-4 p-4 cursor-pointer hover:bg-zinc-200 rounded-md"
      >
        <img src="@/assets/imgs/write.png" class="w-4 h-4" />
      </button>
    </Tooltip>
    <button
      v-else
      @click="addNewChat"
      class="flex items-center h-10 gap-4 p-4 cursor-pointer hover:bg-zinc-200 rounded-md group relative"
    >
      <img src="@/assets/imgs/write.png" class="w-4 h-4" />
      <span class="whitespace-nowrap overflow-hidden text-ellipsis">新聊天</span>
      <span
        class="absolute right-4 text-xs text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
      >
        {{ shortcut_new }}
      </span>
    </button>

    <!-- 搜索按钮 -->
    <Tooltip v-if="collapsed" :arrow="false" placement="right">
      <template #title>
        <div class="flex items-center justify-between gap-2">
          <span>搜索聊天</span>
          <span class="text-xs text-gray-400">{{ shortcut_search }}</span>
        </div>
      </template>
      <button
        @click="isShowSearchContent = true"
        class="flex items-center h-10 gap-4 p-4 cursor-pointer hover:bg-zinc-200 rounded-md"
      >
        <img src="@/assets/imgs/search.png" class="w-4 h-4" />
      </button>
    </Tooltip>
    <button
      v-else
      @click="isShowSearchContent = true"
      class="flex items-center h-10 gap-4 p-4 cursor-pointer hover:bg-zinc-200 rounded-md group relative"
    >
      <img src="@/assets/imgs/search.png" class="w-4 h-4" />
      <span class="whitespace-nowrap overflow-hidden text-ellipsis">搜索聊天</span>
      <span
        class="absolute right-4 text-xs text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
      >
        {{ shortcut_search }}
      </span>
    </button>

    <!-- 库按钮 -->
    <Tooltip v-if="collapsed" :arrow="false" placement="right">
      <template #title>库</template>
      <button class="flex items-center h-10 gap-4 p-4 cursor-pointer hover:bg-zinc-200 rounded-md">
        <img src="@/assets/imgs/lib.png" class="w-4 h-4" />
      </button>
    </Tooltip>
    <button
      v-else
      class="flex items-center h-10 gap-4 p-4 cursor-pointer hover:bg-zinc-200 rounded-md"
    >
      <img src="@/assets/imgs/lib.png" class="w-4 h-4" />
      <span>库</span>
    </button>

    <!-- 会话列表 -->
    <span v-if="!collapsed" class="ml-4 mt-6 text-[#989EA9]">聊天</span>
    <Conversations
      v-if="!collapsed"
      :items="conversations"
      :menu="menuConfig"
      :active-key="activeKey"
      @active-change="$emit('conversation-click', $event)"
      class="py-3 flex-1 overflow-y-auto scrollBar"
    />
    <SearchChat
      v-model="isShowSearchContent"
      :conversations="conversations"
      @new-chat="addCon_search"
      @select="handleSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import logoIcon from '@/assets/imgs/logoIcon.png'
import fold from '@/assets/imgs/fold.png'
import { Tooltip, Modal } from 'ant-design-vue'
import { Conversations } from 'ant-design-x-vue'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import type { ConversationsProps } from 'ant-design-x-vue'
import { showRenameModal } from './showRenameModal'
import { showDeleteModal } from './showDeleteModal'
import { useShortcuts } from './useShortcuts'
import SearchChat from './SearchChat.vue'
import { refreshBusinessKnowledge } from '@/api/api2'

defineProps<{
  collapsed: boolean
  conversations: ConversationsProps['items']
  activeKey: string | null
}>()

const emit = defineEmits<{
  (e: 'update:collapsed', value: boolean): void
  (e: 'add-conversation'): void
  (e: 'conversation-click', key: string): void
  (e: 'rename-conversation', key: string, newName: string): void
  (e: 'delete-conversation', key: string): void
  (e: 'select-conversation', key: string): void
}>()

const isShowSearchContent = ref(false)
const handleSelect = (key) => {
  emit('select-conversation', key)
  isShowSearchContent.value = false
}

const addNewChat =  () => {
   refreshBusinessKnowledge()

  emit('add-conversation')
}
const addCon_search = () => {
  emit('add-conversation')
  isShowSearchContent.value = false
}
const { shortcut_new, shortcut_search } = useShortcuts(emit, isShowSearchContent)

const menuConfig: ConversationsProps['menu'] = (conversation) => ({
  items: [
    {
      label: '重命名',
      key: 'rename',
      icon: h(EditOutlined),
    },
    {
      label: '删除',
      key: 'delete',
      icon: h(DeleteOutlined),
      danger: true,
    },
  ],
  onClick: async (menuInfo) => {
    if (menuInfo.key === 'rename') {
      showRenameModal(conversation, emit)
    } else if (menuInfo.key === 'delete') {
      showDeleteModal(conversation, emit)
    }
  },
})
</script>
